<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Excel编辑</title>

    <!-- Excel 工具类 开始 -->
    <link rel='stylesheet' href='xlsx/plugins/css/pluginsCss.css' />
    <link rel='stylesheet' href='xlsx/plugins/plugins.css' />
    <link rel='stylesheet' href='xlsx/css/luckysheet.css' />
    <link rel='stylesheet' href='xlsx/assets/iconfont/iconfont.css' />

    <script src="xlsx/plugins/js/plugin.js"></script>
    <script src="xlsx/luckysheet.umd.js"></script>
    <script src="xlsx/luckyexcel.umd.js"></script>

    <!-- Excel 工具类 结束 -->
    <!-- <script src="js/jquery-3.0.0.min.js"></script> -->


</head>

<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        height: 100%;
        width: 100%;
    }
</style>
<script>



    //获取url参数
    (function ($) {
        $.getUrlParam = (name) => {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                var res = decodeURI(r[2]);// unescape(r[2]);
                if (res == null || res == undefined || res == "undefined") {
                    return null;
                }
                return res;
            }
            return null;
        }

        //参考jquery3.6.0修改
        jQuery.each(["get", "post"], function (_i, method) {
            jQuery[method] = function (url, data, callback, type) {

                if ($.isFunction(data)) {
                    type = type || callback;
                    callback = data;
                    data = undefined;
                }
                var userToken = $.getUrlParam("userToken");
                if (userToken != null && userToken != '') {
                    var connectStr = url.indexOf("?") != -1 ? "&" : "?"
                    url = url + connectStr + "userToken=" + userToken
                }

                return jQuery.ajax(jQuery.extend({
                    url: url,
                    type: method,
                    dataType: type,
                    data: data,
                    success: callback
                }, jQuery.isPlainObject(url) && url));
            };
        });

    })(jQuery);





    var action=$.getUrlParam("action");
    var id = $.getUrlParam("id");
    var version = $.getUrlParam("version");
    var path=$.getUrlParam("path");


    function save(saveType) {
        //模拟回车
        $("#luckysheet").trigger( $.Event('keydown', {keyCode: 13}))



        var res=null

        var excelData = { id: id, saveType:saveType, path:path, content: luckysheet.getAllSheets() };
        $.ajax({
            url: 'save',
            data: JSON.stringify(excelData),
            type: 'post',
            async: false,
            dataType: 'json',
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
            },
            processData: false,
            cache: false,
            success: function (data) {
                res= data
            }

        });

        return res;
    }

    function downExcel() {
        var excelData = {
            id: id,
            content: luckysheet.getAllSheets(),
            fileName: "导出",
        };
        $.ajax({
            url: 'downExcelPre',
            data: JSON.stringify(excelData),
            type: 'post',
            dataType: 'json',
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
            },
            processData: false,
            cache: false,
            success: function (data) {
                window.open("downExcel");
            }

        });
    }
    function demoHandler(){

                let upload = document.getElementById("Luckyexcel-demo-file");
                let selectADemo = document.getElementById("Luckyexcel-select-demo");
                let downlodDemo = document.getElementById("Luckyexcel-downlod-file");
                let mask = document.getElementById("lucky-mask-demo");
                if(upload){
                    
                    window.onload = () => {
                        
                        upload.addEventListener("change", function(evt){
                            var files = evt.target.files;
                            if(files==null || files.length==0){
                                alert("No files wait for import");
                                return;
                            }

                            let name = files[0].name;
                            let suffixArr = name.split("."), suffix = suffixArr[suffixArr.length-1];
                            if(suffix!="xlsx"){
                                alert("Currently only supports the import of xlsx files");
                                return;
                            }
                            LuckyExcel.transformExcelToLucky(files[0], function(exportJson, luckysheetfile){
                                
                                if(exportJson.sheets==null || exportJson.sheets.length==0){
                                    alert("Failed to read the content of the excel file, currently does not support xls files!");
                                    return;
                                }
                                console.log(exportJson, luckysheetfile);
                                window.luckysheet.destroy();
                                
                                window.luckysheet.create({
                                    container: 'luckysheet', //luckysheet is the container id
                                    showinfobar:false,
                                    data:exportJson.sheets,
                                    title:exportJson.info.name,
                                    userInfo:exportJson.info.name.creator
                                });
                            });
                        });

                        selectADemo.addEventListener("change", function(evt){
                            var obj = selectADemo;
                            var index = obj.selectedIndex;
                            var value = obj.options[index].value;
                            var name = obj.options[index].innerHTML;
                            if(value==""){
                                return;
                            }
                            mask.style.display = "flex";
                            LuckyExcel.transformExcelToLuckyByUrl(value, name, function(exportJson, luckysheetfile){
                                
                                if(exportJson.sheets==null || exportJson.sheets.length==0){
                                    alert("Failed to read the content of the excel file, currently does not support xls files!");
                                    return;
                                }
                                console.log(exportJson, luckysheetfile);
                                mask.style.display = "none";
                                window.luckysheet.destroy();
                                
                                window.luckysheet.create({
                                    container: 'luckysheet', //luckysheet is the container id
                                    showinfobar:false,
                                    data:exportJson.sheets,
                                    title:exportJson.info.name,
                                    userInfo:exportJson.info.name.creator
                                });
                            });
                        });

                        downlodDemo.addEventListener("click", function(evt){
                            var obj = selectADemo;
                            var index = obj.selectedIndex;
                            var value = obj.options[index].value;

                            if(value.length==0){
                                alert("Please select a demo file");
                                return;
                            }

                            var elemIF = document.getElementById("Lucky-download-frame");
                            if(elemIF==null){
                                elemIF = document.createElement("iframe");
                                elemIF.style.display = "none";
                                elemIF.id = "Lucky-download-frame";
                                document.body.appendChild(elemIF);
                            }
                            elemIF.src = value;
                        });
                    }
                }
            }
</script>

<body>
    <div id="lucky-mask-demo"
        style="position: absolute;z-index: 1000000;left: 0px;top: 0px;bottom: 0px;right: 0px; background: rgba(255, 255, 255, 0.8); text-align: center;font-size: 40px;align-items:center;justify-content: center;display: none;">
        加载中</div>
    <p style="text-align:center;">

    <div style="position: absolute; left: 0;top: 0; z-index: 1000; display: none; ">
        <button id="confirm-button" onclick="save('file')">保存到文件</button>
        <button id="confirm-button" onclick="save('db')">保存到数据库</button>
        <button id="confirm-button" onclick="downExcel()">下载</button>
        <button id="confirm-button" onclick="print()" >打印</button>
    </div>
    <div id="updateDiv" style="position: absolute; left: 0;top: 0; z-index: 1000; display: none; ">
        <input style="font-size:16px;" type="file" id="Luckyexcel-demo-file" name="Luckyexcel-demo-file" change="demoHandler" /> 
    </div>
    <div id="luckysheet"
        style="margin:0px;padding:0px;position:absolute;width:100%;left: 0px;top: 10px;bottom: 0px;outline: none;">
    </div>


    <script>


        let mask = document.getElementById("lucky-mask-demo");


        var loadNew=function(){
            window.luckysheet.destroy();
            window.luckysheet.create({
                container: 'luckysheet',
                lang: 'zh',
                allowCopy: true, // 是否允许拷贝
                showtoolbar: true, // 是否显示工具栏
                showinfobar: false, // 是否显示顶部信息栏
                showsheetbar: true, // 是否显示底部sheet页按钮
                showstatisticBar: true, // 是否显示底部计数栏
                sheetBottomConfig: true, // sheet页下方的添加行按钮和回到顶部按钮配置
                allowEdit: true, // 是否允许前台编辑
                enableAddRow: false, // 允许增加行
                enableAddCol: false, // 允许增加列
                userInfo: false, // 右上角的用户信息展示样式
                showRowBar: true, // 是否显示行号区域
                showColumnBar: false, // 是否显示列号区域
                sheetFormulaBar: false, // 是否显示公式栏
                enableAddBackTop: true,//返回头部按钮
                forceCalculation: false,
    
            });



        }


        var loadVersion2 = function () {

            window.luckysheet.destroy();

            window.luckysheet.create({
                container: 'luckysheet',
                lang: 'zh',
                allowCopy: true, // 是否允许拷贝
                showtoolbar: true, // 是否显示工具栏
                showinfobar: false, // 是否显示顶部信息栏
                showsheetbar: true, // 是否显示底部sheet页按钮
                showstatisticBar: true, // 是否显示底部计数栏
                sheetBottomConfig: true, // sheet页下方的添加行按钮和回到顶部按钮配置
                allowEdit: true, // 是否允许前台编辑
                enableAddRow: false, // 允许增加行
                enableAddCol: false, // 允许增加列
                userInfo: false, // 右上角的用户信息展示样式
                showRowBar: true, // 是否显示行号区域
                showColumnBar: false, // 是否显示列号区域
                sheetFormulaBar: false, // 是否显示公式栏
                enableAddBackTop: true,//返回头部按钮
                forceCalculation: false,
                loadUrl: 'getFileByVersion?id=' + id + "&version=" + version,
            });



        };

        var loadVersion1 = function () {
            var value = 'file?id=1&version=1';

            mask.style.display = "flex";
            LuckyExcel.transformExcelToLuckyByUrl(value, 'XX.xlsx', function (exportJson, luckysheetfile) {

                if (exportJson.sheets == null || exportJson.sheets.length == 0) {
                    alert("Failed to read the content of the excel file, currently does not support xls files!");
                    return;
                }
                mask.style.display = "none";
                window.luckysheet.destroy();

                window.luckysheet.create({
                    container: 'luckysheet', //luckysheet is the container id
                    lang: "zh",
                    allowCopy: true, // 是否允许拷贝
                    showtoolbar: true, // 是否显示工具栏
                    showinfobar: false, // 是否显示顶部信息栏
                    showsheetbar: true, // 是否显示底部sheet页按钮
                    showstatisticBar: true, // 是否显示底部计数栏
                    sheetBottomConfig: true, // sheet页下方的添加行按钮和回到顶部按钮配置
                    allowEdit: true, // 是否允许前台编辑
                    enableAddRow: false, // 允许增加行
                    enableAddCol: false, // 允许增加列
                    userInfo: false, // 右上角的用户信息展示样式
                    showRowBar: true, // 是否显示行号区域
                    showColumnBar: false, // 是否显示列号区域
                    sheetFormulaBar: false, // 是否显示公式栏
                    enableAddBackTop: true,//返回头部按钮

                    data: exportJson.sheets,
                    title: exportJson.info.name,
                    userInfo: exportJson.info.name.creator
                });
            });

        }


        var loadPath = function () {
            var value = 'file?path='+path;

            mask.style.display = "flex";
            LuckyExcel.transformExcelToLuckyByUrl(value, 'XX.xlsx', function (exportJson, luckysheetfile) {

                if (exportJson.sheets == null || exportJson.sheets.length == 0) {
                    alert("Failed to read the content of the excel file, currently does not support xls files!");
                    return;
                }
                mask.style.display = "none";
                window.luckysheet.destroy();

                window.luckysheet.create({
                    container: 'luckysheet', //luckysheet is the container id
                    lang: "zh",
                    allowCopy: true, // 是否允许拷贝
                    showtoolbar: true, // 是否显示工具栏
                    showinfobar: false, // 是否显示顶部信息栏
                    showsheetbar: true, // 是否显示底部sheet页按钮
                    showstatisticBar: true, // 是否显示底部计数栏
                    sheetBottomConfig: true, // sheet页下方的添加行按钮和回到顶部按钮配置
                    allowEdit: true, // 是否允许前台编辑
                    enableAddRow: false, // 允许增加行
                    enableAddCol: false, // 允许增加列
                    userInfo: false, // 右上角的用户信息展示样式
                    showRowBar: true, // 是否显示行号区域
                    showColumnBar: false, // 是否显示列号区域
                    sheetFormulaBar: false, // 是否显示公式栏
                    enableAddBackTop: true,//返回头部按钮

                    data: exportJson.sheets,
                    title: exportJson.info.name,
                    userInfo: exportJson.info.name.creator
                });
            });

        }

        if("add"==action){



                //Configuration item
                var options = {
                    container: 'luckysheet', //luckysheet is the container id
                    showinfobar:false,
                }
                luckysheet.create(options)
  

            demoHandler();

            $("#updateDiv").show();
            //window.onload = loadNew
        }else if(path!=null && path!=""){
            window.onload = loadPath
        }else if (version == '1') {
            window.onload = loadVersion1
        } else {
            window.onload = loadVersion2
        }


        // 打印方法
        // 打印时，获取luckysheet指定区域html内容，拼接至div，隐藏luckysheet容器并显示打印区域html
        function to_print() {
            const html = luckysheet.getRangeHtml();
            document.querySelector('#print-html').innerHTML = html;
            document.querySelector('#print-area').style.display = 'block';
            document.querySelector('#button-area').style.display = 'none';

        }

    </script>
</body>

</html>